<template>
  <h1>n的值:{{ n }}</h1>
  <button @click="n++">点我n++</button>
</template>

<script>
//引入生命周期
import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue";

export default {
  name: "my-demo",
  //在生命周期 配置于组合式配置同时存在时 优先配置项里面的先执行
  setup() {
    console.log('---setup---');
    onBeforeMount(() => {
      console.log('---onBeforeMount---');
    }),
    onMounted(() => {
      console.log('---onMounted---')
    }),
    onBeforeUpdate(() => {
      console.log('---onBeforeUpdate---')
    }),
    onUpdated(() => {
      console.log('---onUpdated---')
    }),
    onBeforeUnmount(() => {
      console.log('---onBeforeUnmount---')
    }),
    onUnmounted(() => {
      console.log('---onUnmounted---')
    })
    let n = ref(0);
    return {
      n
    }
  }
}
</script>

<style scoped>

</style>